<template>
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="props.rules"
    :label-position="props.position"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
  <!-- 输入 -->
   <template v-for="(item,index) in props.formList" :key="index">
        <el-form-item v-if="item.type==='input'" :label="item.label" :prop="item.model">
        <el-input v-model="ruleForm[item.model]" />
        </el-form-item>
        <!-- 下拉 -->
        <el-form-item v-if="item.type==='select'" :label="item.label" :prop="item.model">
        <el-select v-model="ruleForm[item.model]" :placeholder="item.placeholder">
            <el-option v-for="(sele,index) in item.data" :key="index" :label="sele.label" :value="sele.value" />
        </el-select>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item v-if="item.type==='textarea'" :label="item.label" :prop="item.model">
            <el-input v-model="ruleForm[item.model]" maxlength="200" show-word-limit type="textarea" />
        </el-form-item>
        <!-- 级联 -->
        <el-form-item v-if="item.type==='cascader'" :label="item.label" :prop="item.model">
            <el-cascader style="width: 100%;" v-model="ruleForm[item.model]" :options="item.options" clearable />
        </el-form-item>
        
   </template>
   <div class="btn" v-if="isShowBtn">
    <el-button type="" @click="handelClickBack">取消</el-button>
    <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
   </div>
  </el-form>
</template>

<script setup>
/* 修改订单状态
* @param  formList 表单列表
*/
/* rules
* @param  rules 表单规则
*/
import {ref,defineProps,defineEmits} from 'vue'
const emits=defineEmits(['update','back'])
const props=defineProps({
    formList:{
        type:Array,
        default(){
            return []
        }
    },
    rules:{
        type:Object,
        default(){
            return {}
        }
    },
    position:{
        type:String,
        default(){
            return 'left'
        }
    },
    isShowBtn:{
        type:Boolean,
        default(){
            return true
        }
    }
})
const ruleFormRef=ref()
const ruleForm=ref({})

// 校验
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        console.log('submit!')
        emits('update',ruleForm.value)
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 取消
const handelClickBack=()=>{
    emits('back')
}
</script>
<style scoped lang="scss" >
.btn{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 0 0;
}
</style>